<!-- created by chengfei 2023/4/27 -->
<!-- 组件：列表设计-PC端JS函数 -->
<template>
    <div>
        <rx-fit style="padding-top: 6px">
            <template #toolheader foldbtn="false" border="false">
                <div class="table-containers">
                    <div class="header-toolbar"></div>
                    <div class="btn-box">
                        <a-space style="margin-bottom: 10px"></a-space>
                    </div>
                    <rx-monaco-editor
                        ref="bodyScript"
                        v-model="bodyScript"
                        language="javascript"
                        style="height: 600px"
                        @change="mchange"
                    >
                        <template v-slot:monacoeditor>
                            <a-dropdown>
                                <a-menu slot="overlay">
                                    <template v-for="item in scriptInsertAry">
                                        <a-menu-item
                                            :key="item.clickEvent"
                                            v-if="!item.children"
                                            @click="handInsertScript(item)"
                                            v-show="showInsertScript(item)"
                                        >
                                            {{ item.name }}
                                        </a-menu-item>

                                        <a-sub-menu :key="item.name" v-if="item.children && item.children.length > 0">
                                            <span slot="title">{{ item.name }}</span>
                                            <a-menu-item
                                                :key="subItem.name"
                                                v-for="subItem in item.children"
                                                @click="handInsertScript(subItem)"
                                            >
                                                {{ subItem.name }}
                                            </a-menu-item>
                                        </a-sub-menu>
                                    </template>
                                </a-menu>
                                <a-button type="primary" style="margin-left: 8px">
                                    {{$ti18('formBoListDialog.list.insertScript','插入脚本')}} <a-icon type="down" />
                                </a-button>
                            </a-dropdown>
                            <rx-common-script @select="insertScript" use-to="list-pcJs" type="0" :btnText="$ti18('formBoListDialog.list.inserCommonScript','插入常用脚本')">
                                <template v-slot:button>
                                    <a-button type="primary" style="margin-left: 8px">
                                        {{$ti18('formBoListDialog.list.insertCode','插入脚本代码')}}
                                        <a-icon type="down" />
                                    </a-button>
                                </template>
                            </rx-common-script>
                        </template>
                    </rx-monaco-editor>
                </div>
            </template>
        </rx-fit>
    </div>
</template>

<script>
import { RxGrid, RxInputButton, RxMonacoEditor,RxCommonScript, GridMixin, BaseForm } from "@lowcode/jpaas-common-lib"
import ScriptVm from '@/views/modules/form/codegen/businessEdit/components/Edit2ScriptVm' // 插入脚本要用到这个js文件
import ScriptInsertAry from '@/views/modules/share/ScriptLib'
export default {
    name: 'Edit2PCFunctionForJS',
    // 引入表格新增/删除/移动行等操作
    mixins: [GridMixin, BaseForm, ScriptVm],
    components: {
        RxGrid,
        RxInputButton,
        RxMonacoEditor,
        RxCommonScript
    },
    props: {
        defaultValue: { type: Object, default: () => {} },
    },
    data() {
        return {
            bodyScript: '',
            ScriptInsertAry: ScriptInsertAry,
            scriptInsertAry: [],
        }
    },
    computed: {},
    created() {
        this.scriptInsertAry=this.commonJsLib
        /*this.scriptInsertAry.push(this.commonJsLib) // commonJsLib, flowJsLib, tableLib均来自于ScriptVm.js文件
        this.scriptInsertAry.push(this.flowJsLib)
        this.scriptInsertAry.push(this.tableJsLib)*/
    },
    mounted() {
        const { bodyScript } = this.defaultValue
        this.bodyScript = bodyScript || ''
    },
    methods: {
        mchange(val) {
            let dom = document.getElementsByClassName('monaco-list-rows')[0]
        },
        showInsertScript(item) {
            let script = item.condition
            if (!script) {
                return true
            }
            script = 'return ' + script
            let fn = new Function('mdl', script)
            let rtn = fn(this.mdl)
            return rtn
        },

        collectData() {
            let result={success:true};
            let config={bodyScript:this.bodyScript};
            result.data=config;
            return result;
        },
    },
}
</script>

<style scoped>
.is-seted {
    color: #70b90b;
    margin-left: 5px;
}
</style>
